<template>
    <div class="Recharge">
      <header>
        <p><router-link to="/Balance"><img src="../../static/img/transfer/contact_06.jpg">返回</router-link></p>
        <p>充值</p>
      </header>
      <section>
        <p>充值金额</p>
        <p>￥ <input type="text" placeholder="输入充值金额"></p>
      </section>
      <p class="next"><router-link to="Success">下一步</router-link></p>
      <div class="foot">
        <ul>
          <li>1</li>
          <li>4</li>
          <li>7</li>
          <li>.</li>
        </ul>
        <ul>
          <li>2</li>
          <li>5</li>
          <li>8</li>
          <li>0</li>
        </ul>
        <ul>
          <li>3</li>
          <li>6</li>
          <li>9</li>
          <li><img src="../../static/img/transfer/contact_06.jpg"></li>
        </ul>
        <ul>
          <li>+</li>
          <li>确定</li>
        </ul>
      </div>
    </div>
</template>

<script>
    export default {
        name: "Recharge"
    }
</script>

<style scoped>
  header{
    display: flex;
    font-size: 1.2rem;
    padding: .8rem;
    background: #fff;
    border-bottom: 1px solid #ddd;
    margin-bottom: 1rem;
  }
  header p:nth-child(1){
    width: 45%;
  }
  header p:nth-child(1) a{
    color: #108ee9;
  }
  header p:nth-child(1) img{
    width: .9rem;
    height: 1.3rem;
    margin-right: .3rem;
  }
  header p:nth-child(2){
    width: 55%;
    color: #000;
    font-weight: 500;
  }
  section{
    background: white;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: .9rem 0;
  }
  section p:first-child{
    font-size: 1.1rem;
    font-weight: 500;
    padding: .8rem;
  }
  section p:last-child{
    font-size: 1.5rem;
    font-weight: 500;
    padding: .8rem;
  }
  section p:last-child input{
    font-size: 1.3rem;
    border: none;
  }
  .next a{
    display: block;
    width: 90%;
    padding: .9rem 0;
    font-size: 1.2rem;
    background: #108ee9;
    color: white;
    text-align: center;
    border-radius: 0.3rem;
    margin: 2rem auto;
  }
  .foot{
    display: flex;
    width: 100%;
    position: fixed;
    bottom: 0;
  }
  .foot ul{

    list-style-type: none;
    width: 25%;
  }
  .foot ul li{
    width: 100%;
    border: 1px solid #ddd;
    border-bottom: none;
    border-right: none;
    padding: .8rem 0;
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
  }
  div.foot ul:last-child li{
    padding: 2.4rem 0;
  }
  div.foot ul li img{
    height: .8rem;
    width: .8rem;
  }
  div.foot ul:last-child li:last-child{
    background: #108ee9;
    color: white;
  }
</style>
